<template>
	<view class="tree-item" v-if="defaultP&&defaultP.id&&item" :style="parent.id?'':'margin-bottom:16rpx'">
		<view class="head" @click.stop="changeShow">
			<image
				src="/static/images/down_pie.png"
				:class="show ? 'rt45' : ''"
				mode="scaleToFill"
				class="left-icon"
				v-if="item[defaultP.children] && item[defaultP.children].length > 0"
			></image>
			<view class="txt" v-if="isState === 1" >
				<text :style="(selectIds.indexOf(item.id)!=-1)||(selectGroup.indexOf(item.id)!=-1)||select?'color:#0091FF':''">{{ item[defaultP.label] }}</text>
				<text :style="selectIds.indexOf(item.id)!=-1||selectGroup.indexOf(item.id)!=-1||select?'color:#0091FF':''" v-if="item.type == 1 || item.showTotal">({{ item.total || 0 }})</text>
			</view>
			<view class="txt" v-if="isState === 2">
				<text :style="(selectIds.indexOf(item.id)!=-1)||(selectGroup.indexOf(item.id)!=-1)||select?'color:#0091FF':'#222'">{{ item[defaultP.label] }}</text>
				<text :style="selectIds.indexOf(item.id)!=-1||selectGroup.indexOf(item.id)!=-1||select?'color:#0091FF':'#222'" v-if="item.type == 1 || item.showTotal">({{ item.total || 0 }})</text>
				<!-- <text class="textColor" :class="{
					textColorTwo: selectIds.indexOf(item.id)==-1||selectGroup.indexOf(item.id)==-1||!select,
					textColorOne: selectIds.indexOf(item.id)!=-1||selectGroup.indexOf(item.id)!=-1||select,
				}"  >{{ item[defaultP.label] }}</text>
				<text v-if="item.type == 1 || item.showTotal" class="textColor" :class="{
					textColorTwo: selectIds.indexOf(item.id)==-1||selectGroup.indexOf(item.id)==-1||!select,
					textColorOne: selectIds.indexOf(item.id)!=-1||selectGroup.indexOf(item.id)!=-1||select,
				}" >({{ item.total || 0 }})</text> -->
			</view>
			
			<image src="@/static/images/down.png" mode="scaleToFill" class="right-ifon" v-if="item.type == 2"></image>
		</view>
		<view class="content" v-if="item[defaultP.children] && item[defaultP.children].length > 0" v-show="show">
			<tree-node
				v-if="item[defaultP.children].length > 1"
				:parent="item"
				:selectIds="selectIds" :selectGroup="selectGroup"
				:item="{ id: item.id, title: '全部', showTotal: true, type: 2, total: item.total }"
				:defaultProps="defaultP"
				:select="selectGroup.indexOf(item.id)!=-1||select"
				:isState="isState"
			></tree-node>
			<tree-node :isState="isState" :selectIds="selectIds" :select="selectGroup.indexOf(item.id)!=-1||select" :selectGroup="selectGroup" :parent="item" v-for="sitem in item[defaultP.children]" :item="sitem" :key="sitem.id" :defaultProps="defaultP"></tree-node>
		</view>
	</view>
</template>

<script>
export default {
	name: 'TreeNode',
	componentName: 'TreeNode',

	props: {
		isState:{// 区分保养跟考勤页面样式显示
			type:Number,
			default:1
		},
		select:{
			type:Boolean,
			default:false
		},
		selectIds:{
			type:String,
			default:''
		},
		selectGroup:{
			type:String,
			default:''
		},
		parent: {
			type: Object,
			default: () => {
				return {};
			}
		},
		item: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	inject: ['defaultProps', 'onClickItem'],
	computed: {
		defaultP() {
			return this.defaultProps || {};
		}
	},
	data() {
		return {
			show: false
		};
	},
	watch:{
		item(val) {
			// console.log( 'item',this.item,this.defaultP);
			if (val.show == true) {
				this.show = true;
			} else {
				this.show = false;
			}
		}
	},
	created() {
		// console.log(this.defaultP,'item',this.item);
		if (this.item && this.item.show == true && this.defaultP && this.defaultP.id) {
			this.show = true;
		}
	},
	methods: {
		changeShow() { 
			// console.log(this.selectIds,this.selectGroup,this.item)
			this.onClickItem({...this.item,parent:this.parent});
			if (this.item[this.defaultProps.children] && this.item[this.defaultProps.children].length > 0) {
				this.show = !this.show;
			}
		}
	}
};
</script>

<style scoped lang="scss">
@mixin animate2 {
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.tree-item {
	padding: 10rpx 0rpx;
	padding-left: 10rpx;
	background-color: #fff;

	.head {
		display: flex;
		align-items: center;
		line-height: 60rpx;
		.txt {
			font-size: 30rpx;
			color: #222;
			flex: 1;
			.textColor{
				color: #222;
			}
			
			.textColorTwo{
				color: #999;
			}
			.textColorOne{
				color: #0091FF;
			}
		}
	}
	.right-ifon {
		margin-right: 30rpx;
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
		transform: rotate(-90deg);
	}
	.left-icon {
		margin-right: 16rpx;
		width: 22rpx;
		height: 22rpx;
		@include animate2;
		transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		&.rt45 {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			-o-transform: rotate(0deg);
		}
	}
	.content {
		padding-left: 40rpx;
	}
}
</style>
